<template>
    <view class="proSpecs">
        <u-popup :show="useGoods.specsStates" @close="onClose" closeable round="10" z-index="20001" :overlayStyle="{ zIndex: 20000 }">
            <view class="proSpecsWrapper">
                <view class="top"></view>

                <view class="body">
                    <scroll-view class="scrollView" scroll-y>
                        <view class="proItem">
                            <productItem :child="detailData" :noBtn="true"></productItem>
                        </view>

                        <view class="selectWrapper" v-if="detailData.shopStyle">
                            <view class="list" v-for="(item, itemIndex) in detailData.shopStyle">
                                <view class="title">{{ item.skuName }}</view>
                                <view class="group">
                                    <view
                                        class="btn"
                                        @click="clickSelect(itemIndex, childIndex)"
                                        v-for="(j, childIndex) in item.child"
                                        :class="skuNameList.includes(j.name) ? 'active' : ''"
                                    >
                                        {{ j.name }}
                                    </view>
                                </view>
                            </view>
                        </view>

                        <view class="numSelect">
                            <view class="title">购买数量</view>
                            <u-number-box v-model="numvalue"></u-number-box>
                        </view>
                    </scroll-view>
                </view>

                <view class="footer">
                    <u-button color="#EC544F" icon="shopping-cart" iconColor="#fff" :disabled="!disableStates" @click="clickConfirm">确认</u-button>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script setup>
import { computed, reactive, ref } from 'vue';
import productItem from '../produce-item/produce-item';
import { goodsCounterStore } from '../../stores/shop/goods.js';
import { useCounterStore } from '../../stores/shop/car.js';
const useGoods = goodsCounterStore();
const userCar = useCounterStore();
const detailData = computed(() => {
    return useGoods.detailData;
});
//计数器
const numvalue = ref(1);
const onClose = () => {
    useGoods.specsStates = false;
};
//选规格
const skulist = reactive([]);
let skuNameList = computed(() => {
    return skulist.map((i) => {
        if (i.name != null) {
            return i.name;
        }
    });
});
const clickSelect = (itemIndex, childIndex) => {
    let skuObj = {
        skuName: detailData.value.shopStyle[itemIndex].skuName,
        name: detailData.value.shopStyle[itemIndex].child[childIndex].name
    };
    let index = skulist.findIndex((item) => {
        return item.skuName == skuObj.skuName;
    });
    if (index < 0) {
        skulist.push(skuObj);
    } else {
        skulist[index].name = skuObj.name;
    }
    // skuNameList.value = skulist.map((i) => i.name);
};
const disableStates = computed(() => {
    return skulist.length == detailData.value.shopStyle.length;
});
const clickConfirm = () => {
    if (!disableStates.value) return;
    //获取数据
    let goodObj = {
        ...detailData.value,
        skulist: [...skuNameList.value],
        shopNum: numvalue.value
    };

    let index = userCar.cardList.findIndex((i) => {
        if (i.skulist) {
            return goodObj._id == i._id && JSON.stringify(i.skulist.sort()) == JSON.stringify(goodObj.skulist.sort());
        } else {
            return goodObj._id == i._id;
        }
    });
    if (index != -1) {
        userCar.cardList[index].shopNum += goodObj.shopNum;
    } else {
        userCar.cardList.push(goodObj);
    }
    //清空并关闭
    skulist.splice(0, skulist.length);
    numvalue.value = 0;
    useGoods.specsStates = false;
    useGoods.goodsStates = false;
};
</script>

<style lang="scss" scoped>
.proSpecsWrapper {
    height: 70vh;

    .top {
        height: 80rpx;
        width: 100%;
    }

    .body {
        height: calc(100% - 220rpx);

        .scrollView {
            height: 100%;
            padding: 0 30rpx;
            .proItem {
                border-bottom: 1px solid $border-color-light;
            }

            .selectWrapper {
                border-bottom: 1px solid $border-color-light;
                padding: 10rpx 0;
                .list {
                    padding: 20rpx 0;
                    .title {
                        font-size: 32rpx;
                        font-weight: bold;
                        padding-bottom: 20rpx;
                    }
                    .group {
                        @include flex-box-set(start);
                        flex-wrap: wrap;
                        .btn {
                            padding: 0rpx 25rpx;
                            height: 60rpx;
                            border: 1rpx solid $border-color-light;
                            margin-right: 20rpx;
                            border-radius: 10rpx;
                            color: $text-font-color-2;
                            margin-bottom: 20rpx;
                            @include flex-box-set();
                            background: $page-bg-color;
                            &.active {
                                border-color: $brand-theme-color;
                                color: $brand-theme-color;
                                background: rgba(236, 87, 79, 0.1);
                            }
                        }
                    }
                }
            }

            .numSelect {
                display: flex;
                align-items: center;
                padding: 30rpx 0;
                border-bottom: 1px solid $border-color-light;
                .title {
                    font-size: 32rpx;
                    font-weight: bold;
                    padding-right: 30rpx;
                }
            }
        }
    }

    .footer {
        height: 140rpx;
        border-top: 1px solid $border-color-light;
        @include flex-box-set();
        padding: 0 200rpx;
    }
}
</style>
